let arrowLeft = document.querySelector('.arrow-left');
let arrowRight = document.querySelector('.arrow-right');
let dots = document.querySelectorAll('.dot-box > span');
let list = document.querySelectorAll('.img-box > ul > li');
let box = document.querySelector('.box');
let timer;

// 每次点击的时候需要记录当前是第几张 (记录下标)
let index = 0;
// list[0] ---> 第一个li元素
// 保存上一次的操作下标 (移除上一次的类名)
let lastIndex = 0;

arrowRight.addEventListener('click', arrowRightFn);
arrowLeft.addEventListener('click', arrowLeftFn);

// 下一张函数
function arrowRightFn() {
  console.log('下一张');
  // ul里面展示的图片切换功能, 每一个li包含不同的img, li[下一张下标]实现切换
  index++;
  // 判断index是否超出li集合的长度, 如果超出回到第一个li
  if (index >= list.length) {
    index = 0;
  }

  // ++index >= list.length && (index = 0); // 短路运算
  changeActive();
}

// 上一张函数
function arrowLeftFn() {
  console.log('上一张');

  // 切换index, 如果是第一张, 上一张为最后一张
  index--;
  if (index < 0) {
    index = list.length - 1;
  }

  // --index < 0 && (index = list.length - 1) // 短路运算
  changeActive();
}

// 小圆点的点击事件
dots.forEach((el, elIndex) => {
  el.addEventListener('click', () => {
    // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
    index = elIndex;
    // 更改激活类名
    changeActive();
  });
});

// changeActive 函数, 主要功能是修改激活类名

function changeActive() {
  // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
  list[lastIndex].classList.remove('li-active');
  // 小圆点的激活类
  dots[lastIndex].classList.remove('dot-active');

  // 更换激活对象
  list[index].classList.add('li-active');
  dots[index].classList.add('dot-active');

  // 更新上一次的值lastIndex
  lastIndex = index;
}

// 自动轮播
autoPlay();
function autoPlay() {
  // 停止上一个定时器任务 (解决切换屏幕的bug)
  clearInterval(timer);
  timer = setInterval(() => {
    // 下一张函数
    arrowRightFn();
  }, 3000);
}

// 停止自动轮播 (鼠标移入轮播图范围之内)
box.addEventListener('mouseenter', () => {
  clearInterval(timer);
});

// 继续开始轮播 (鼠标移出轮播图范围)
box.addEventListener('mouseleave', () => {
  autoPlay();
});

// visibilityChange 功能: 浏览器标签页被隐藏/显示的时候触发该事件

document.addEventListener('visibilitychange', () => {
  // document.hidden 检测文档是否为隐藏
  // document.visibilityState

  // console.log('hidden', document.hidden);
  // console.log('visibilityState', document.visibilityState);

  if (document.hidden) {
    clearInterval(timer);
    console.log('隐藏');
  } else {
    autoPlay();
    console.log('显示');
  }
});
